/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React,{Component} from 'react';
import { connect } from 'react-redux';
import LoginActivity from './pages/LoginActivity'
import {PixelRatio} from 'react-native'
import {
    createBottomTabNavigator,
    createStackNavigator,
    createDrawerNavigator,
} from 'react-navigation';

import {
    reduxifyNavigator,
    createReactNavigationReduxMiddleware
} from 'react-navigation-redux-helpers'
import {createMaterialBottomTabNavigator} from "react-navigation-material-bottom-tabs"
import IndexA from "./pages/indexA";
import IndexB from "./pages/indexB";
import IndexC from "./pages/indexC";
import IndexD from "./pages/indexD";
import Ionicons from "react-native-vector-icons/Ionicons"




//主界面通用样式option
const IndexNavigationOptions = {
    headerTitleStyle:{flex:1,textAlign:"center"}
};

//indexA
const IndexA_stack = createStackNavigator({
    IndexA:{
        screen:IndexA,
        navigationOptions:IndexNavigationOptions
    }
});

//indexB
const IndexB_stack = createStackNavigator({
    IndexB:{
        screen:IndexB,
        navigationOptions:IndexNavigationOptions
    }
});
//IndexC
const IndexC_stack = createStackNavigator({
    IndexC:{
        screen:IndexC,
        navigationOptions:IndexNavigationOptions
    }
});
//IndexD
const IndexD_stack = createStackNavigator({
    IndexD:{
        screen:IndexD,
        navigationOptions:IndexNavigationOptions
    }

});

//tab

// const TabNavigator = createBottomTabNavigator(
//     {
//         IndexA: {screen: IndexA_stack,},
//         IndexB: {screen: IndexB_stack},
//         IndexC: {screen: IndexC_stack},
//         IndexD: {screen: IndexD_stack},
//     },

//     {
//         navigationOptions: ({ navigation }) => ({
//             initialRouteName:IndexA,
//             tabBarIcon: ({ focused, tintColor }) => {
//                 const { routeName } = navigation.state;
//                 let iconName;
//                 if (routeName === 'IndexA') {
//                     iconName = `ios-information-circle${focused ? '' : '-outline'}`;
//                 } else if (routeName === 'IndexB') {
//                     iconName = `ios-options${focused ? '' : '-outline'}`;
//                 }else if(routeName === "IndexC"){

//                     iconName = `ios-archive${focused ? '' : '-outline'}`;
//                 }else if(routeName === "IndexD"){
//                     iconName = `ios-analytics${focused ? '' : '-outline'}`;
//                 }

//                 return <Ionicons name={iconName} size={25} color={tintColor} />;
//             },
//             headerStyle: {
//                 backgroundColor: '#f4511e',
//             },

//             headerTintColor: '#fff',
//             headerTitleStyle: {
//                 fontWeight: 'bold',
//             },
//             swipeEnabled:true
//         }),
//         //颜色控制
//         tabBarOptions: {
//             activeTintColor: 'tomato',
//             inactiveTintColor: 'gray',
//         },
//     }
// );



const TabNavigator = createMaterialBottomTabNavigator(
    {
        IndexA: {
            screen: IndexA_stack,
            navigationOptions: {
                title: '首页',
            }
        },
        IndexB: {
            screen: IndexB_stack,
            navigationOptions: {
                title: '微头条',
            }
        },
        IndexC: {
            screen: IndexC_stack,
            navigationOptions: {
                title: '视频',
            }
        },
        IndexD: {
            screen: IndexD_stack,
            navigationOptions: {
                title: '我',
            }
        },
    },

    {
        navigationOptions: ({ navigation }) => ({
            initialRouteName:"IndexA",
            shifting:false,
            labeled:true,
            activeTintColor: "tomato",
            inactiveTintColor: "#7d7d7d",
            barStyle:{backgroundColor:"#f3f3f3",borderTopColor: "#f3f3f2",borderTopWidth: 1/PixelRatio.get()},
            tabBarIcon: ({ focused, tintColor }) => {
                const { routeName } = navigation.state;
                let iconName;
                if (routeName === 'IndexA') {
                    iconName = `ios-home${focused ? '' : '-outline'}`;
                } else if (routeName === 'IndexB') {
                    iconName = `ios-text${focused ? '' : '-outline'}`;
                }else if(routeName === "IndexC"){

                    iconName = `ios-videocam${focused ? '' : '-outline'}`;
                }else if(routeName === "IndexD"){
                    iconName = `ios-person${focused ? '' : '-outline'}`;
                }

                return <Ionicons name={iconName} size={28} color={tintColor} />;
            },
            headerStyle: {
                backgroundColor: '#e2041b',
            },

            headerTintColor: '#fff',
            headerTitleStyle: {
                fontWeight: 'bold',
            },
            swipeEnabled:true
        }),
        
        //颜色控制
        tabBarOptions: {
            activeTintColor: 'tomato',
            inactiveTintColor: 'gray',
        },
    }
);


//根导航器
const RootNavigator = createStackNavigator(
    {
        main:{
            screen:TabNavigator,
            navigationOptions:{
                header:null
            }
        },
        LoginActivity:{
            screen:LoginActivity,
            navigationOptions:{
                title:"title1",//标题，如果设置了这个导航栏和标签栏的title就会变成一样的，所以不推荐使用这个方法。
                //header:null,//可以设置一些导航的属性，当然如果想隐藏顶部导航条只要将这个属性设置为null就可以了。
                headerTitle:"登录标题",//设置导航栏标题，推荐用这个方法。
                headerBackTitle:"backtitle",//设置跳转页面左侧返回箭头后面的文字，默认是上一个页面的标题。可以自定义，也可以设置为null
                //headerTruncatedBackTitle:,//设置当上个页面标题不符合返回箭头后的文字时，默认改成"返回"。（上个页面的标题过长，导致显示不下，所以改成了短一些的。）
                headerRight:(<Ionicons name='ios-archive' size={30} color='gray' style={{marginRight:20}} />),//设置导航条右侧。可以是按钮或者其他。
                // headerLeft：,//设置导航条左侧。可以是按钮或者其他。
                headerStyle:{backgroundColor:"gray"},//设置导航条的样式。背景色，宽高等。如果想去掉安卓导航条底部阴影可以添加elevation: 0，iOS下用shadowOpacity: 0。
                headerTitleStyle:{flex:1,textAlign:"center"},//设置导航条文字样式。安卓上如果要设置文字居中，只要添加alignSelf:'center'就可以了。在安卓上会遇到，如果左边有返回箭头导致文字还是没有居中的问题，最简单的解决思路就是在右边也放置一个空的按钮。
                //headerBackTitleStyle:{flex:1,textAlign:"center"},//设置导航条返回文字样式。
                // headerTintColor：,//设置导航栏文字颜色。总感觉和上面重叠了。
                // headerPressColorAndroid:,//安卓独有的设置颜色纹理，需要安卓版本大于5.0
                // gesturesEnabled:,//是否支持滑动返回手势，iOS默认支持，安卓默认关闭
                gestureResponseDistance:{horizontal:300},//对象覆盖触摸从屏幕边缘开始的距离，以识别手势。 它需

            }

        },

    },
    {
        initialRouteName:"main"
    });

//中间件  创建导航器的redux state是初始化导航器的state
const NavigationReduxMiddleware = createReactNavigationReduxMiddleware(
    'root',
    state=>state.nav
);

const AppWithNavigationState = reduxifyNavigator(RootNavigator,'root');

const mapStateToProps = state =>({state:state.nav});

const AppNavigator = connect(mapStateToProps)(AppWithNavigationState);

export {RootNavigator,AppNavigator,NavigationReduxMiddleware} ;

//module.exports = rootNavigator;
// export default class App extends React.Component {
//     render() {
//         return <RootStack />;
//     }
// }
